<template>
    <div style="display: flex;justify-content: space-between;">
        <a-form size="small" :model="pageData" layout="inline" style="margin-bottom: 10px;" ref="formRef">
            <CorporateSectorCascader :configCascader="configCascader" @changeCascader="changeCascader" />
            <a-form-item label="日期">
                <a-range-picker class="bacClass" v-model="pageData.createTimeArr" style="width:260px" />
            </a-form-item>
        </a-form>
        <Toolbar v-if="tabKey == 1" :items="['查询', '新增', '删除', '责任判定']" @select="selectHandle" @add="addHandler"
            @del="deleteHandle" @dutyDecide="dutyDecide(1, '')">
        </Toolbar>
        <Toolbar v-if="tabKey == 2" :items="['查询']" @select="selectHandle">
        </Toolbar>
    </div>
    <div class="cssTable">
        <a-tabs :lazy-load="true" :justify="true" :default-active-key="tabKey" @change="tabChange">
            <a-tab-pane title="未判责" :key="1">
                <a-spin :loading="pageData.pageLoading" tip="加载中" dot
                    style="height:100%;width: 98%;z-index:999 ;margin-left: 13px;">
                    <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true"
                        :style="{ height: pageData.rHeight - 220 + 'px' }" :suppressDragLeaveHidesColumns="true"
                        rowSelection="multiple" @grid-ready="gridReady" :defaultColDef="defaultColDef"
                        class='ag-theme-alpine' :rowData="pageData.tableList" :columnDefs="tableColumns"
                        :localeText="localeText1"></AgGridVuesCopys>
                </a-spin>
            </a-tab-pane>
            <a-tab-pane title="已判责" :key="2">
                <a-spin :loading="pageData.pageLoading" tip="加载中" dot
                    style="height:100%;width: 98%;z-index:999 ;margin-left: 13px;">
                    <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true"
                        :style="{ height: pageData.rHeight - 220 + 'px' }" :suppressDragLeaveHidesColumns="true"
                        rowSelection="multiple" @grid-ready="gridReady2" :defaultColDef="defaultColDef"
                        class='ag-theme-alpine' :rowData="pageData.tableList" :columnDefs="tableColumns2"
                        :localeText="localeText1"></AgGridVuesCopys>
                </a-spin>
            </a-tab-pane>
        </a-tabs>
    </div>
    <paginationCopys :page-size-options="pagingList1" :total="total" show-total show-jumper show-page-size
        @change="PageSize" @page-size-change="change1" style="justify-content: center;margin-top:12px;"
        :page-size="size" :current="page" />
    <a-modal :visible="pageData.visible" okText="保存" cancelText="返回" @ok="handleOK" @cancel="pageData.visible = false"
        width="77%" :draggable="true">
        <template #title>
            {{ pageData.sideTitle }}
        </template>
        <table class="visTable" v-for="(item, index) in pageData.dutyData" :key="index">
            <tr style="background-color: #dde2eb;">
                <td>织布单号</td>
                <td>坯布编号</td>
                <td :colspan="2">坯布名称</td>
                <td>问题数量</td>
                <td>单位</td>
                <td>事故单号</td>
            </tr>
            <tr>
                <td>{{ item.planOrderCode }}</td>
                <td>{{ item.greyCode }}</td>
                <td :colspan="2">{{ item.greyName }}</td>
                <td>1</td>
                <td>匹</td>
                <td>{{ item.problemCode }}</td>
            </tr>
            <tr>
                <td>责任人</td>
                <td>{{ item.staffName }}</td>
                <td>车间班长</td>
                <td style="min-width: 40px;">{{ pageData.departmentHeader }}</td>
                <td>查布班长</td>
                <td :colspan="2">{{ item.greyChecker }}</td>
            </tr>
            <tr>
                <td>问题描述</td>
                <td :colspan="6">{{ item.defectReason }}</td>
            </tr>
            <tr>
                <td>问题补充</td>
                <td :colspan="6">
                    <a-textarea class="bacClass" v-model="pageData.questionSupplement" :max-length="200" allow-clear
                        show-word-limit /> 
                </td>
            </tr>
            <tr>
                <td>责任工序</td>
                <td :colspan="6">
                    <el-select v-model="pageData.handlerOrderCodes" filterable clearable multiple placeholder=" "
                        :collapse-tags-tooltip="true" class="bacClass" @change="userChange()" style="width:100%">
                        <el-option v-for="item in pageData.orderList" :key="item.code"
                            :label="item.departmentName + '/' + item.name" :value="item.code" />
                    </el-select>
                </td>
            </tr>
        </table>
    </a-modal>
    <!-- 手动创建 -->
    <a-drawer style="z-index: 999" ok-text="保存" cancel-text="关闭" :drawer-style="{ zIndex: 9999 }" :mask-closable="false"
        :width="400" :visible="pageData.showAdd" unmountOnClose @ok="sideOk" @cancel="pageData.showAdd = false">

        <template #title>
            {{ pageData.sideTitle }}
        </template>
        <div>
            <a-form ref="formRef" layout="horizontal" :model="dataForm">
                <a-form-item label-col-flex="80px" label="织布单号" field="planOrderCode"
                    :validate-trigger="['change', 'blur']" :rules="[{ required: true, message: '织布单号必填' }]">
                    <a-select allow-clear allow-search class="bacClass" v-model="dataForm.planOrderCode"
                        @focus="getPlanOrderCode('')" @search="getPlanOrderCode" @change="codeChange">
                        <a-option v-for="(item, index) in pageData.codeList" :value="item" :key="index">
                            {{ item }}
                        </a-option>
                    </a-select>
                </a-form-item>
                <a-form-item label-col-flex="80px" label="坯布编号" field="greyCode" :validate-trigger="['change', 'blur']"
                    :rules="[{ required: true, message: '坯布编号必填' }]">
                    <a-input class="bacClass" v-model="dataForm.greyCode" disabled />
                </a-form-item>
                <a-form-item label-col-flex="80px" label="坯布名称" field="greyName" :validate-trigger="['change', 'blur']"
                    :rules="[{ required: true, message: '坯布名称必填' }]">
                    <a-input class="bacClass" v-model="dataForm.greyName" disabled />
                </a-form-item>
                <a-form-item label-col-flex="80px" label="机台" field="machineCode" :validate-trigger="['change', 'blur']"
                    :rules="[{ required: true, message: '机台必填' }]">
                    <a-select allow-clear allow-search class="bacClass" v-model="dataForm.machineCode"
                        @change="machineChange(dataForm.machineCode)">
                        <a-option v-for="(item, index) in pageData.machineList" :value="item" :key="index">
                            {{ item }}
                        </a-option>
                    </a-select>
                </a-form-item>
                <a-form-item label-col-flex="80px" label="公司" field="companyName" :validate-trigger="['change', 'blur']"
                    :rules="[{ required: true, message: '公司必填' }]">
                    <a-input class="bacClass" v-model="dataForm.companyName" disabled />
                </a-form-item>
                <a-form-item label-col-flex="80px" label="员工" field="staffCode" :validate-trigger="['change', 'blur']"
                    :rules="[{ required: true, message: '员工必填' }]">
                    <el-select v-model="dataForm.staffCode" filterable clearable multiple collapse-tags
                        :collapse-tags-tooltip="true" class="bacClass" style="width:100%" placeholder=" ">
                        <el-option v-for="item in pageData.staffList" :key="item.code"
                            :label="item.departmentName + '/' + item.name" :value="item.code" />
                    </el-select>
                </a-form-item>
                <a-form-item label-col-flex="80px" label="查布班长" field="greyChecker"
                    :validate-trigger="['change', 'blur']" :rules="[{ required: true, message: '查布班长必填' }]">
                    <a-select popup-container="html" allow-clear allow-search class="bacClass"
                        v-model="dataForm.greyChecker" @focus="greyChecker('')" @search="greyChecker($event)">
                        <a-option v-for="(item, index) in pageData.greyCheckList" :value="item.name" :key="index">
                            {{ item.code + '/' + item.name }}
                        </a-option>
                    </a-select>
                </a-form-item>
                <a-form-item label-col-flex="80px" label="转数" field="convolution1"
                    :validate-trigger="['change', 'blur']" :rules="[{ required: true, message: '转数必填' }]">
                    <a-input class="bacClass" v-model="dataForm.convolution1" />
                </a-form-item>
                <a-form-item label-col-flex="80px" label="疵布重量" field="lowLevelWeight"
                    :validate-trigger="['change', 'blur']" :rules="[{ required: true, message: '疵布重量必填' }]">
                    <a-input-number class="bacClass" v-model="dataForm.lowLevelWeight" :min="0" :precision="2" />
                </a-form-item>
                <a-form-item label-col-flex="80px" label="问题原因" field="defectReason"
                    :validate-trigger="['change', 'blur']" :rules="[{ required: true, message: '问题原因必填' }]">
                    <a-textarea class="bacClass" v-model="dataForm.defectReason" :max-length="200" allow-clear
                        show-word-limit />
                </a-form-item>
            </a-form>
        </div>
    </a-drawer>
</template>

<script lang='ts' setup>
import { reactive, toRefs, ref, onMounted, Ref } from 'vue'
import Toolbar from '@/components/Toolbar.vue'
import { post, get } from '@/api/http'
import { Message, Modal } from '@arco-design/web-vue'

import { localeText } from '@/api/aggridZw'
import { pagingList } from '@/api/paging'
import { FormInstance } from "@arco-design/web-vue/es/form";
import CorporateSectorCascader from '@/components/corporateSectorCascader/inde.vue'

const pagingList1: any = ref(pagingList)
const localeText1: any = ref(localeText)
const pageData: any = reactive({
    rHeight: 0,
    showAdd: false,
    pageLoading: false,
    sideTitle: '',
    tableList: [],
    visible: false,
    status: 0,
    companyId: null,
    companyName: '',
    createTimeArr: null,
    questionSupplement: '',
    handlerOrderNames: '',
    handlerOrderCodes: '',
    handlerDepartmentCodes: '',
    departmentHeader: '',
    dutyData: [],
    orderList: [],
    codeList: [],
    machineList: [],
    staffList: [],
    userCompanyId: null,
    userCompanyName: '',
    allData: [],
    greyCheckList: [],
})
const dataForm: any = reactive({
    planOrderCode: '',
    greyCode: '',
    greyName: '',
    machineCode: '',
    companyName: '',
    departmentName: '',
    staffCode: '',
    staffName: '',
    convolution1: '',
    lowLevelWeight: '',
    defectReason: '',
    greyChecker: ''
})

//分页
const total = ref(0);
const page = ref(1);
const size = ref(10);
function PageSize(val: any) {
    page.value = val
    doRefresh();
}
function change1(val: any) {
    size.value = val
    doRefresh();
}

const defaultColDef: any = {
    sortable: true,
    resizable: true,
    filter: true,
}

//未判责
const gridOption = ref()
const colState = ref()
const gridReady = (params: any) => {
    gridOption.value = params.api
    colState.value = params.columnApi
}
const tableColumns: any = [
    {
        headerName: '',
        checkboxSelection: true,
        headerCheckboxSelection: true,
        pinned: 'left',
        width: 50
    },
    {
        headerName: "来源",
        width: 150,
        cellRenderer: {
            template: `<span> {{ val.createUser=== 'SYN' ? '系统创建' : '手动创建' }}</span>`,
            setup(props: any) {
                let val = ref(props.params.data)
                return {
                    val,
                }
            },
        },
    },
    { headerName: "事故单号", field: "problemCode", width: 150, },
    { headerName: "日期", field: "createTime", width: 150, },
    { headerName: "公司", field: "companyName", width: 150, },
    { headerName: "部门", field: "departmentName", width: 150, },
    { headerName: "员工工号", field: "staffCode", width: 150, },
    { headerName: "员工姓名", field: "staffName", width: 150, },
    { headerName: "机台号", field: "machineCode", width: 150, },
    { headerName: "织布单号", field: "planOrderCode", width: 150, },
    { headerName: "坯布编号", field: "greyCode", width: 150, },
    { headerName: "坯布名称", field: "greyName", width: 150, },
    {
        headerName: "数量",
        width: 150,
        cellRenderer: () => {
            return "<span>" + 1 + "</span>";
        },
    },
    {
        headerName: "单位",
        width: 150,
        cellRenderer: () => {
            return "<span>" + '匹' + "</span>";
        },
    },
    {
        headerName: "问题原因",
        field: "defectReason",
        width: 150,
    },
    {
        headerName: "疵布重量",
        field: "lowLevelWeight",
        width: 150,
    },
    {
        headerName: "实际转数",
        width: 150,
        cellRenderer: (params: any) => {
            let val = params.data.convolution1 + params.data.convolution2
            return "<span>" + val + "</span>";
        },
    },
    {
        headerName: "操作",
        field: "action",
        width: 150,
        pinned: 'right',
        cellRenderer: {
            template: `<a-tag class="tagCss" v-if="val.createUser != 'SYN'" @click="c">修改</a-tag>
                       <a-tag class="tagCss" v-if="val.createUser=== 'SYN'" disabled style="color:#d1d1d1 !important">
                        修改</a-tag>`,
            setup(props: any) {
                let val = ref(props.params.data)
                const c = () => {
                    editHanler(props.params.data)
                }
                return {
                    c,
                    val,
                }
            },
        },
    }
]

//已判责
const gridOption2 = ref()
const colState2 = ref()
const gridReady2 = (params: any) => {
    gridOption2.value = params.api
    colState2.value = params.columnApi
}
const tableColumns2: any = [
    {
        headerName: '',
        checkboxSelection: true,
        headerCheckboxSelection: true,
        pinned: 'left',
        width: 50
    },
    {
        headerName: "来源", width: 150,
        cellRenderer: {
            template: `<span> {{ val.createUser=== 'SYN' ? '系统创建' : '手动创建' }}</span>`,
            setup(props: any) {
                let val = ref(props.params.data)
                return {
                    val,
                }
            },
        },
    },
    { headerName: "事故单号", field: "problemCode", width: 150, },
    { headerName: "日期", field: "createTime", width: 150, },
    { headerName: "公司", field: "companyName", width: 150, },
    { headerName: "部门", field: "departmentName", width: 150, },
    { headerName: "员工工号", field: "staffCode", width: 150, },
    { headerName: "员工姓名", field: "staffName", width: 150, },
    { headerName: "机台号", field: "machineCode", width: 150, },
    { headerName: "织布单号", field: "planOrderCode", width: 150, },
    { headerName: "坯布编号", field: "greyCode", width: 150, },
    { headerName: "坯布名称", field: "greyName", width: 150, },
    {
        headerName: "数量", width: 150,
        cellRenderer: () => {
            return "<span>" + 1 + "</span>";
        },
    },
    {
        headerName: "单位", width: 150,
        cellRenderer: () => {
            return "<span>" + '匹' + "</span>";
        },
    },
    { headerName: "问题原因", field: "defectReason", width: 150, },
    { headerName: "问题补充", field: "questionSupplement", width: 150, },
    {
        headerName: "疵布重量",
        field: "lowLevelWeight",
        width: 150,
    },
    {
        headerName: "实际转数", width: 150,
        cellRenderer: (params: any) => {
            let val = params.data.convolution1 + params.data.convolution2
            return "<span>" + val + "</span>";
        },
    },
    { headerName: "责任工序", field: "handlerOrderNames", width: 150, },
    {
        headerName: "操作",
        field: "action",
        width: 150,
        pinned: 'right',
        cellRenderer: {
            template: `<el-button style="color:#165dff;" link @click="c">判责修改</el-button>`,
            setup(props: any) {
                const c = () => {
                    dutyDecide(2, props.params.data)
                }
                return {
                    c,
                }
            },
        },
    }
]

//查询
const formRef = ref<FormInstance>();
function doRefresh() {
    formRef.value?.validate().then((err: any) => {
        if (!err) {
            pageData.pageLoading = true
            post({
                url: "/qms/qualityProblem/pagedQualityProblems",
                data: {
                    current: page.value,
                    size: size.value,
                    status: pageData.status,
                    companyId: pageData.companyId,
                    beginTime: pageData.createTimeArr == undefined ? null : pageData.createTimeArr[0] + ' 00:00:00',
                    endTime: pageData.createTimeArr == undefined ? null : pageData.createTimeArr[1] + ' 23:59:59'
                }
            }).then((res: any) => {
                if (res.code === 200) {
                    pageData.tableList = res.data.records
                    gridOption.value.setRowData(res.data.records)
                    total.value = res.data.total
                }
            }).catch(console.log).finally(() => {
                pageData.pageLoading = false
            })
        }
    })
}

const selectHandle = () => {
    if (tabKey.value == 1) {
        page.value = 1
        pageData.status = 0
        doRefresh()
    } else {
        page.value = 1
        pageData.status = 1
        doRefresh()
    }

}

let tabKey = ref(1)
const tabChange = (e: any) => {
    tabKey.value = e
    if (e == 1) {
        pageData.status = 0
        page.value = 1
        doRefresh()
    } else {
        pageData.status = 1
        page.value = 1
        doRefresh()
    }
}

//新增
const addHandler = () => {
    if (dataForm.id) {
        delete dataForm.id
    }
    for (let key in dataForm) {
        dataForm[key] = ''
    }
    dataForm.companyId = pageData.userCompanyId
    dataForm.companyName = pageData.userCompanyName
    pageData.showAdd = true
    pageData.sideTitle = '新增事故任务'
    getUsersList('')
}

//删除
const deleteHandle = () => {
    if (gridOption.value.getSelectedRows().length === 0) {
        Message.error('请勾选数据')
        return
    }
    Modal.confirm({
        title: '系统提示',
        content: '确认删除选中的数据?',
        onOk: () => {
            post({
                url: '/qms/qualityProblem/delQualityProblems',
                data: gridOption.value.getSelectedRows().map((res: any) => res.id),
            }).then((res: any) => {
                if (res.code == 200) {
                    Message.success('删除成功')
                    doRefresh()
                } else {
                    Message.error(res.message)
                }
            })
        },
    })
}

//修改
const editHanler = (record: any) => {
    pageData.sideTitle = '修改事故任务'
    if (!Array.isArray(record.staffCode)) {
        record.staffCode = record.staffCode.split(',')
        record.staffName = record.staffName.split(',')
        record.departmentName = record.departmentName.split(',')
        record.departmentId = record.departmentId.split(',')
    }
    for (let key in dataForm) {
        dataForm[key] = record[key]
    }
    getUsersList('')
    dataForm.id = record.id
    pageData.showAdd = true
}

//责任判定 弹窗
const dutyDecide = (num: any, record: any) => {
    if (num == 1) {
        if (gridOption.value.getSelectedRows().length === 0) {
            Message.error('请先勾选')
            return
        }
        if (gridOption.value.getSelectedRows().length > 1) {
            Message.error('只能勾选一条')
            return
        }
        if (!gridOption.value.getSelectedRows()[0].departmentHeader) {
            getDepartmentHeader(gridOption.value.getSelectedRows()[0].departmentId)
        }else{
            pageData.departmentHeader = gridOption.value.getSelectedRows()[0].departmentHeader
        }
        pageData.dutyData = gridOption.value.getSelectedRows()
        pageData.questionSupplement = ''
        pageData.handlerOrderCodes = ''
        pageData.handlerOrderNames = ''
        pageData.handlerDepartmentCodes = ''
        pageData.sideTitle = '责任判定'
    } else {
        if (!record.departmentHeader) {
            getDepartmentHeader(record.departmentId)
        }else{
            pageData.departmentHeader = record.departmentHeader
        }
        pageData.dutyData = [record]
        pageData.questionSupplement = record.questionSupplement
        pageData.handlerOrderCodes = record.handlerOrderCodes
        pageData.handlerOrderNames = record.handlerOrderNames
        pageData.handlerDepartmentCodes = record.handlerDepartmentCodes
        pageData.sideTitle = '修改责任判定'
    }
    getUsersList('')
    pageData.visible = true
}

//保存
const handleOK = () => {
    if (!pageData.questionSupplement) {
        Message.warning('问题补充必填！')
        return
    }
    if (!pageData.handlerOrderCodes) {
        Message.warning('责任工序必填！')
        return
    }
    pageData.dutyData.forEach((o: any) => {
        o.departmentHeader = pageData.departmentHeader
        o.questionSupplement = pageData.questionSupplement
        if (pageData.handlerOrderCodes && Array.isArray(pageData.handlerOrderCodes)) {
            o.handlerOrderNames = pageData.handlerOrderNames.join(',')
            o.handlerOrderCodes = pageData.handlerOrderCodes.join(',')
            o.handlerDepartmentCodes = pageData.handlerDepartmentCodes.join(',')
        }
        o.status = 1
    })
    post({
        url: "/qms/qualityProblem/saveOrUpdateQualityProblem",
        data: pageData.dutyData[0]
    }).then((res: any) => {
        if (res.code === 200) {
            pageData.visible = false
            selectHandle()
        }
    })
}

const configCascader = ref<{}>({
    corporateWidth: '230px', //公司宽度
    corporateRquired: false, //公司是否必填
    size: 'small',
    corporateName: '公司', //公司label
    cascaderShow: 'sector', //配置部门不显示
})
const changeCascader = (data: any) => {
    const { corporateId, corporateLabel } = data
    pageData.companyId = corporateId
    pageData.companyName = corporateLabel
}

//获取当前登录账号
const getUserToken = () => {
    post({
        url: 'admin/acl/user/findUserToken',
    }).then((res: any) => {
        if (res.code === 200) {
            pageData.userCompanyId = res.data.data.firmId
            pageData.userCompanyName = res.data.data.firmName
        }
    })
}

//员工
const getUsersList = (val: any) => {
    let company_id = null
    if (pageData.sideTitle === '新增事故任务' || pageData.sideTitle === '修改事故任务') {
        company_id = pageData.userCompanyId
    } else {
        company_id = pageData.dutyData[0].companyId
    }
    post({
        url: 'org/hrEmployee/getList',
        data: {
            deleteState: 0,
            obsoleteState: 0,
            company_id: company_id == undefined ? '' : company_id,
            department_id: '',
            ygText: val,
        }
    }).then(({ data, code }: any) => {
        if (code === 200) {
            if (val == '') {
                pageData.allData = data
            }
            if (pageData.sideTitle == '新增事故任务' || pageData.sideTitle == '修改事故任务') {
                pageData.staffList = data
                pageData.greyCheckList = data
            } else {
                pageData.orderList = data
            }
        } else {
            Message.error({
                content: '该部门无员工信息！',
                duration: 5000,
            })
        }
    })
}

const userChange = () => {
    if (pageData.handlerOrderCodes.length === 0) {
        pageData.handlerOrderCodes = ''
        pageData.handlerOrderNames = ''
        pageData.handlerDepartmentCodes = ''
    } else {
        pageData.handlerOrderNames = pageData.handlerOrderCodes.map((o1: any) => {
            const data = pageData.allData.find((o: any) => o1 === o.code);
            return data ? (data.departmentName + '/' + data.name) : '';
        });
        pageData.handlerDepartmentCodes = pageData.handlerOrderCodes.map((o1: any) => {
            const data = pageData.allData.find((o: any) => o1 === o.code);
            return data ? data.departmentId : null;
        });
    }
}

//查布班长下拉
const greyChecker = (val: any) => {
    post({
        url: 'org/hrEmployee/getList',
        data: {
            deleteState: 0,
            obsoleteState: 0,
            company_id: pageData.userCompanyId == undefined ? '' : pageData.userCompanyId,
            department_id: '',
            ygText: val,
        }
    }).then(({ data, code }: any) => {
        if (code === 200) {
            pageData.greyCheckList = data
        } else {
            Message.error({
                content: '该部门无员工信息！',
                duration: 5000,
            })
        }
    })
}

//车间班长
const getDepartmentHeader = (ids: any) => {
    get({
        url: '/qms/qualityProblem/findDepartmentHeaderByIds?ids=' + ids,
    }).then(({ data, code }: any) => {
        if (code === 200) {
            pageData.departmentHeader = data
        }
    })
}

//织布单号下拉
const getPlanOrderCode = (val: any) => {
    post({
        url: 'planSingle/planOrder/getDropInfo',
        data: {
            planOrderCode: val
        }
    }).then(({ data, code }: any) => {
        if (code === 200) {
            pageData.codeList = data
        }
    })
}

const codeChange = (val: any) => {
    if (val) {
        post({
            url: 'planSingle/planMachineTask/getList',
            data: {
                planOrderCode: val
            }
        }).then(({ data, code }: any) => {
            if (code === 200) {
                if (data.length != 0) {
                    dataForm.greyCode = data[0].greyCode
                    dataForm.greyName = data[0].greyName
                    dataForm.machineCode = data[0].machineCode
                    machineChange(dataForm.machineCode)
                    //去重
                    pageData.machineList = [...new Set(data.map((o: any) => o.machineCode))];
                } else {
                    dataForm.greyCode = ''
                    dataForm.greyName = ''
                    dataForm.machineCode = ''
                }
            }
        })
    } else {
        dataForm.greyCode = ''
        dataForm.greyName = ''
        dataForm.machineCode = ''
    }
}

const machineChange = (val: any) => {
    if (val) {
        post({
            url: '/planSingle/planSchedul/getEmp',
            data: {
                planOrderCode: dataForm.planOrderCode,
                machineCode: val
            }
        }).then(({ data, code }: any) => {
            if (code === 200) {
                if (data.length != 0) {
                    dataForm.staffCode = data.map((o: any) => o.empCode)
                    getUsersList('')
                } else {
                    dataForm.staffCode = ''
                }
            }
        })
    } else {
        dataForm.staffCode = ''
    }
}

const sideOk = () => {
    if (dataForm.staffCode.length !== 0) {
        const getList = (property: string) =>
            dataForm.staffCode.map((o1: any) => {
                const data = pageData.allData.find((o: any) => o1 === o.code);
                return data ? data[property] : '';
            });
        dataForm.staffName = getList('name');
        dataForm.departmentName = getList('departmentName');
        dataForm.departmentId = getList('departmentId');
    }
    let data = dataForm
    if (Array.isArray(data.staffCode)) {
        data.staffCode = data.staffCode.join(',')
        data.staffName = data.staffName.join(',')
        data.departmentName = data.departmentName.join(',')
        data.departmentId = data.departmentId.join(',')
    }
    post({
        url: "/qms/qualityProblem/saveOrUpdateQualityProblem",
        data: data
    }).then((res: any) => {
        if (res.code === 200) {
            pageData.showAdd = false
            selectHandle()
        }
    })
}

onMounted(() => {
    pageData.rHeight = document.getElementsByClassName("main-section")[0]?.clientHeight
    //弹出层的高
    if (pageData.rHeight !== undefined) {
        pageData.rHeight = pageData.rHeight;
    }
    selectHandle()
    getPlanOrderCode('')
    getUserToken()
})
</script>

<style lang='less' scoped>
:deep(.ag-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-header-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-cell-value) {
    user-select: initial;
    -moz-user-select: text;
    -ms-user-select: text;
    -webkit-user-select: text;
}

:deep(.arco-table-td-content) {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

:deep(.arco-select-view-multiple.arco-select-view-disabled .arco-select-view-tag) {
    color: #4e5969 !important;
    background-color: white;
    border-color: white;
    font-size: 14px
}

:deep(.el-select .el-input.is-focus .el-input__wrapper) {
    box-shadow: 0 0 0 0 gray !important;
}
:deep(.el-input__wrapper){
    box-shadow: 0 0 0 0 gray !important;
    padding:0
}

.visTable {
    margin-top: 100px;
    width: 90%;
    min-height: 350px;
    margin: 0 auto;
    text-align: center;
    border-collapse: collapse;
    border: 1px solid #ccc;

    td {
        border: 1px solid #ccc;
    }

    th {
        border: 1px solid #ccc;
    }
}
</style>